
class Main extends React.Component {
    constructor(props) {
  super(props);
  this.state = {
    list:[],
    name:'',
    id:0,
    state:"ALL",
    start: 0,
    pagesize: 15,
    counts: [],
    keyword:'',
    ex_num:'',
    ex_name:'',
  };
}

formatlist(list) {
    var listitem = [],wulist=[]//,{postage}=this.state;
    if(list.length>0){
        list.forEach((x,i) => {
    //         console.log(list,list)
            // addressarr=JSON.parse(x.address);
            
           let bookhtml=[];// addressinfoarr=x.apply.addressinfo==null?"":JSON.parse(decodeurl(x.apply.addressinfo)),
           if(x.books.length>0){
               x.books.forEach(y=>{
                    let src = ''
                    if (y.goodsimg.indexOf('http') == -1) {
                        src = `${API_HEAD}imgs/` + y.goodsimg
                    } else {
                        src = y.goodsimg
                    }
                   bookhtml.push(
                      <div>
                          <p>
                              <img src={src}/>
                              <span>{y.goodsname}</span>
                          </p>
                            <p>x<span>{y.paynum}</span></p>
                      </div>
                   )
               })
           }
            listitem.push(
                <div className="orderitem">
                    <div className="orderheader">
                        <div>
                            <p>{getstatecontent(x.apply.state)}</p>
                            <p style={{display:x.apply.payDate=="0001-01-01T00:00:00"?"none":""}}>付款时间：{formatDate(new Date(x.apply.payDate))}</p>
                            <p>订单号：{x.apply.ordernum}</p>
                            {/* <p>付款人：{x.name}</p> */}
                            <p>实付金额：{(x.apply.cost/100).toFixed(2)}</p>
                        </div>
                        <p className="todetails" onClick={this.todetails.bind(this,x.apply.ordernum)}>订单详情</p>
                    </div>
                    <div className="ordercontent">
                        <div>
                            <p className="name">收货人：{x.apply.borrow_username}</p>
                            <p>电话：{x.apply.phone}</p>
                            <p>地址：{x.apply.addressinfo}</p>
                            <p className="red" style={{ display: x.apply.describe? "" : "none" }}>留言：{x.apply.describe}</p>
                        </div>
                        <div>
                            {bookhtml}
                        </div>
                        <div>
                            <p>应付金额：￥ <span>{(x.apply.total/100).toFixed(2)}</span></p>
                            <p>实付金额：￥ <span>{(x.apply.cost/100).toFixed(2)}</span></p>
                        </div>
                    </div>
                    <div className="orderfooter" style={{ display: x.apply.state=="NO_PAY"? "none" : "" }}>
                        {/* <div className="orderfooterleft">
                            <div  style={{ display: x.apply.pickupDate? "" : "none" }}>预约还书时间：{x.apply.pickupDate}  {x.apply.pickupDatetime}</div>
                        </div> */}
                        <div className="orderfooterright">
                            {/* <p>备注</p> */}
                            {/* <p style={{ display:x.apply.state=="SOLVING"? "" : "none" }}  onClick={this.refund.bind(this,x.apply.ordernum)}>退款</p> */}
                            {/* <p>打印小票</p> */}
                            <p style={{ display:x.apply.state=="PAY_SUCCESS"||x.apply.state=="GOODSRECEIVED"? "" : "none" }} data-toggle="modal" data-target="#modalOne" 
                            onClick={this.sendgoods.bind(this,x.apply.ordernum,x.apply.state,x.apply.userid)} className="fahuo">自送发货</p>
                        </div>
                    </div>
                </div>
            )
        });
    }
    else {
        wulist.push(
            <p className="wulist">暂无数据</p>
        )
    }
    this.setState({listitem,list,originallist:list,wulist})
}

// 详情
todetails(e){
    window.location.href = "./goodsorderdetail.html?ordernum="+e;
}
//    查询
searchinput(e) {
    this.setState({ keyword: e.target.value })
}
search() {
    if (this.state.keyword.length == 0) return;
    let { keyword, start, pagesize,state } = this.state,that=this;
    that.freshlist(start,state)

}
reset() {
    let {state}=this.state
    this.setState({ keyword: '' },()=>{
        this.freshlist(0,state);
    });
   
}
// 删除
del(e){    
    this.setState({delid:e},()=>{
        $('#myModal').modal('toggle');
    })
}
confirmdel(){
       let {delid}=this.state
    //    Goodstypedeltype(delid,res=>{
    //     if(res.issuccess==1){
    //         alert('删除成功')
    //         $('#myModal').modal('toggle');
    //         this.freshlist()
    //     }else{
    //         $('#myModal').modal('toggle');
    //         alert(res.msg);
    //     }
    // })
}

submit(){
    var {ex_num,ex_name,ordernum,start,state,orderstate,userid}=this.state,that=this,err='';
        if(ex_name=="")err="请输入快递公司名称"
        if(ex_num=="")err="请输入运单号"
        if(err.length>0){
        alert(err);
        return
    }
    var data = { ex_num ,ex_name,ordernumber:ordernum,userid}
    // if (this.state.id > 0) data['id'] = this.state.id;
    if(orderstate=="PAY_SUCCESS"){
        setexpress(data, res => {
            if (res.issuccess == 1) {
                // that.setState({id:0})
                alert('保存成功');
                that.freshlist(start,state)
            }
        })
    }else{
        setbackexpress(data, res => {
            if (res.issuccess == 1) {
                // that.setState({id:0})
                alert('保存成功');
                that.freshlist(start,state)
            }
        })
    }

}

componentDidMount() {
    let { state } = this.state;
      
    // basegetSettings(res=>{
    //     if(res.issuccess==1){
    //         let postage=res.data.PostFee
    //         this.setState({postage},()=>{
                this.freshlist(0,state) 
    //         })
    //     }
    // }) 

    }
freshlist(start,state) {
    let { pagesize,keyword } = this.state;
    getgoodslist({start,pagesize,state,keyword},res=>{
       if(res.issuccess==1){
        if (start == 0) {
            let pagecount = Math.ceil(res.total / pagesize);
            this.setpager(pagecount, start);
            this.setState({ start,total:res.total })
        }
       this.formatlist(res.list);      
   }
})  
}
// refund(e){
//     let that =this;
//     setrefund(e,res=>{
//         if(res.issuccess==1){
//             alert(res.data)
//             that.freshlist(0,that.state.state)
//         }
//     })
// }
// 退押金
// refund(e){    
//     this.setState({delid:e},()=>{
//         $('#myModal').modal('toggle');
//     })
// }
confirmdel(){
       let {delid,start,state}=this.state
       setrefund(delid,res=>{
        if(res.issuccess==1){
            alert(res.data)
            that.freshlist(start,state)
        }
    })
}
sendgoods(e,state,userid){
    this.setState({ordernum:e,orderstate:state,userid})
    // sendgoods(e,res=>{
    //     if(res.issuccess==1){
    //         alert('发货成功！')
    //         that.freshlist(0,that.state.state)
    //     }
    // })
}
setpager(pagecount, start) {
    let counts = [];
    for (let i = 1; i < pagecount + 1; i++) {
        counts.push(start + i)
    }
    this.setState({ counts, pagestart: 0 })
}
clickpage(e) {
    let { start, pagesize,state } = this.state
    start = e * pagesize
    this.setState({ pagestart: e, start }, () => {
        this.freshlist(start,state)
    })
}
setpage(e){
    let {pagesize,state,start}=this.state
    pagesize=parseInt(e)
    start=0
    this.setState({pagesize,start},()=>{
        this.freshlist(start, state)
    })
}
tabstate(e) {
    let that=this,{start,state,keyword}=that.state
    state=e
    start=0
    console.log(e,'e.target.value')
    // let { target } = this.state;
    // target[prop] = e.target.value
    // this.setState({ target })
    this.setState({state,start },()=>{
        that.freshlist(start,state,keyword)
    }) 
}
inputchange(prop, e) {
    // let { target } = this.state;
    // target[prop] = e.target.value
    // this.setState({ target })
    this.setState({ [prop]: e.target.value })
}
add(){
    $('#modalOne').modal('toggle');
}
     render() {
        let{listitem,wulist,counts,pagestart,keyword,ex_num,ex_name} = this.state;

            return(
                <div className="breadLinebox">
                    <Modal content='确定要退押金吗？' click={this.confirmdel.bind(this)} />
                    <div className="modal fade" id="modalOne" >
                        <div className="modal-dialog">
                            <div className="modal-content">

                            <div className="modal-header border">
                                <p className="modal-title">填写</p>
                                <img data-dismiss="modal" src="./src/close.png"/>
                                        </div>
                            <div className="modal-body">
                            <div className="input-group">
                                    <span className="input-group-addon">运单号</span>
                                    <input id='name' onChange={this.inputchange.bind(this,'ex_num')} value={ex_num} type="text" placeholder='请输入运单号' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">公司名称</span>
                                    <input id='name' onChange={this.inputchange.bind(this,'ex_name')} value={ex_name} type="text" placeholder='请输入快递公司名称' className="input" />
                                </div>
                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.submit.bind(this)} data-dismiss="modal"  className="submitmod">提交</button>
                            </div>

                            </div>
                            </div>
                        </div>
                <div className='content_wrap panel-default content_wrap'>
                   <div className="breadLine">
                        <div className="img">
                            当前位置 > 优选购订单
                        </div>
                    </div>
                   <div className="content">
                        <div className="tabletit">
                            <div className="search">
                                <input onChange={this.searchinput.bind(this)} value={keyword} type="text" placeholder='请输入订单号' className />
                                <p onClick={this.search.bind(this)}>查询</p>
                                <p onClick={this.reset.bind(this)}>返回</p>
                            </div>
                            {/* <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建</p> */}
                        </div>
                        <div className="tabbox">
                            <p className={this.state.state=="ALL"?"click":''} onClick={this.tabstate.bind(this,"ALL")}>全部</p>
                            <p className={this.state.state=="NO_PAY"?"click":''} onClick={this.tabstate.bind(this,"NO_PAY")}>未支付</p>
                            <p className={this.state.state=="PAY_SUCCESS"?"click":''} onClick={this.tabstate.bind(this,"PAY_SUCCESS")}>待发货</p>
                            <p className={this.state.state=="CANCELED"?"click":''} onClick={this.tabstate.bind(this,"CANCELED")}>已取消</p>
                            <p className={this.state.state=="SHIPPED"?"click":''} onClick={this.tabstate.bind(this,"SHIPPED")}>待收货</p>
                            {/* <p className={this.state.state=="GOODSRECEIVED"?"click":''} onClick={this.tabstate.bind(this,"GOODSRECEIVED")}>已收货</p> */}
                            {/* <p className={this.state.state=="SHOPSHIPPED"?"click":''} onClick={this.tabstate.bind(this,"SHOPSHIPPED")}>店家待收货</p> */}
                            {/* <p className={this.state.state=="SOLVING"?"click":''} onClick={this.tabstate.bind(this,"SOLVING")}>待退款</p> */}
                            <p className={this.state.state=="SOLVED"?"click":''} onClick={this.tabstate.bind(this,"SOLVED")}>已完成</p>
                        </div>
                        {listitem}
                        {/* <table className="tab">
                            <thead>
                            <tr>
                            <th>订单编号</th>
                            <th>订单创建时间</th>
                            <th>支付金额</th>
                            <th className="tconter">订单状态</th>
                            <th className="cz tconter">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {listitem}
                            </tbody>
                        </table> */}
                        {wulist}
                        <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                        </div>
                   </div>
                </div>
                </div>
                
                
            )

            
        }
    }





ReactDOM.render(
    <div>
        <TopLine/>
        <div id='body'>
            <LeftMenu code='goodsorder' height="order"/>
            <Main/>
        </div>
        </div>
            // <Barrage/>
,$('.container')[0]
)